import React, { Component } from 'react'
import * as d3 from 'd3'

import { Collapse } from 'antd';
// import { green } from 'ansi-colors';
// import { buildSvg} from '../util/d3Util'
const { Panel } = Collapse;


export default class transition extends Component {

    /**
     * 动画效果2
     * ease(d3(key)),d3容易被忽略
     */
    draw2() {
        let el = '.draw_2'
        d3.select(el).selectAll('svg').remove()
        let svg = d3.select(el).append("svg").attr("width", "100%").attr("height", 600)
        let arr = [
            [100, 100, 25, 'green'],
            [100, 200, 25, 'green'],
            [200, 100, 25, 'green'],
            [200, 200, 25, 'green']
        ]
        svg.selectAll("circle")
            .data(arr)
            .enter()
            .append("circle")
            .attr("cx", d => d[0])
            .attr("cy", d => d[1])
            .attr("r", d => d[2])
            .attr("fill", d => d[3])
            .on('click', function () {
                let x = d3.select(this).attr("cx")
                console.dir(d3["easeLinear"])
                d3.select(this)
                    .transition().duration(1000).attr("r", "50").attr("fill","orange")
                    .transition().duration(1000).attr("r", "75").attr("cx", "300").ease(d3["easeLinear"])
                    .transition().duration(1000).attr("r", "100").attr("cx", "250").ease(d3["easeBack"])
                    .transition().duration(1000).attr("r", "25").attr("fill", "green").attr("cx", x).ease(d3["easeSin"])
            })
    }

    draw1(el) {
        d3.select(el).selectAll('svg').remove()
        let svg = d3.select(el).append("svg").attr("width", "100%").attr("height", 3400)
        let duration = 3000
        // 运动缓动动画方式
        let animations = ['easeLinear', 'easePolyIn', 'easePolyOut', 'easePolyInOut', 'easeQuad', 'easeQuadIn', 'easeQuadOut',
            'easeQuadInOut', 'easeCubic', 'easeCubicIn', 'easeCubicOut', 'easeCubicInOut', 'easeSin', 'easeSinIn', 'easeSinOut', 'easeSinInOut',
            'easeExp', 'easeExpIn', 'easeExpOut', 'easeExpInOut', 'easeCircle', 'easeCircleIn', 'easeCircleOut', 'easeCircleInOut', 'easeElastic',
            'easeElasticIn', 'easeElasticOut', 'easeElasticInOut', 'easeBack', 'easeBackIn', 'easeBackOut', 'easeBackInOut',
            'easeBounce', 'easeBounceIn', 'easeBounceOut', 'easeBounceInOut']
        let bodyW = document.documentElement.clientWidth
        let g = svg.append("g")
        // 标题文字
        var title = g.append('text')
        title.text('d3.js实现运动缓动动画').attr('fill', 'black')
            .attr('x', bodyW / 2)
            .attr('y', 20)
            .attr('text-anchor', 'middle')
            // .style('font-size', '20px')
            // .style('font-weight', 'bold')
            .attr('dy', 8)

        animations.forEach((v, i) => {
            //加入文字内容的标准操作
            g = svg.append("g")
            g.append("text").text((i + 1) + '.' + v).attr('fill', 'black')
                .attr('x', 10)
                .attr('y', 90 * (i + 1))
            // .attr('text-anchor', 'middle')
            // .style('font-size', '14px')
            // .style('font-weight', 'bold')
            
            let circle = svg.append("circle")
                .attr("cx", 30)
                .attr('cy', 90 * (i + 1) + 40)
                .attr('r', 25)
                .attr('fill', 'steelblue')
                .style('cursor', 'pointer')
                .on('click', function () {
                    circle.transition() // 启动过渡效果
                        .duration(duration)
                        .attr('cx', 800)
                        .ease(d3[v])
                })

        })

    }

    callback = (key) => {
        let el = `.draw_` + key
        if (key === '2') {
            this.draw2()
        } else {
            this.draw1(el)
        }

    }

    render() {
        return (
            <Collapse accordion defaultActiveKey={['1']} onChange={this.callback}>
                <Panel header="运动缓动动画" key="1">
                    <div className="draw_1"></div>
                </Panel>
                <Panel header="动画效果2" key="2">
                    <div className="draw_2"></div>
                </Panel>
                <Panel header="动画效果3" key="3">
                    <div className="draw_3"></div>
                </Panel>
            </Collapse>
        )
    }
}
